import React, { useState } from 'react'
import { Table, Justify, Button, SearchBox, Card, Layout, Bubble, Icon, Select } from 'tea-component'
import { useNavigate } from 'react-router-dom'
const { Body, Content } = Layout
const { pageable } = Table.addons

const _cvmList = Array.from({ length: 6 }).map(() => ({
  instanceId: 'ins-4m99aio4',
  instanceName: 'wawayuan-001',
  status: 'running',
  AvailabilityZone: 'Singapore zone 3',
  InstanceType: 'Standard S5',
  InstanceConfiguration: '1-Core2GB 2Mbps 50G system disk',
  Operation: '10.144.77.75'
}))

localStorage.setItem('cvm-list', JSON.stringify(_cvmList))

const options = [
  {
    value: 'More Actions',
    text: 'More Actions'
  }
]

function TableLayoutExample() {
  const [favorite, setFavorite] = useState('More Actions')

  const cvmList = JSON.parse(localStorage.getItem('cvm-list')!)

  const navigate = useNavigate()
  function handleClick() {
    navigate('/detail/buy')
  }

  return (
    <>
      <Table.ActionPanel>
        <Justify
          left={
            <>
              <Button type="primary" onClick={handleClick}>
                Create
              </Button>
              <Button disabled>Start Up</Button>
              <Button disabled>Stutdown</Button>
              <Select appearance="button" options={options} value={favorite} placeholder="please select" />
            </>
          }
          right={
            <>
              <SearchBox />
              <Button icon="setting" />
              <Button icon="refresh" />
              <Button icon="download" />
            </>
          }
        />
      </Table.ActionPanel>
      <Card>
        <Table
          verticalTop
          records={cvmList}
          recordKey="instanceId"
          rowDisabled={record => record.status === 'stopped'}
          rowClassName={record => record.status}
          columns={[
            {
              key: 'instance',
              header: 'ID/Name',
              render: cvm => (
                <>
                  <p>
                    <a>{cvm.instanceId}</a>
                  </p>
                  <p>{cvm.instanceName}</p>
                </>
              )
            },
            {
              key: 'Status',
              header: () => (
                <>
                  Status
                  <Bubble content="Description">
                    <Icon type="info" />
                  </Bubble>
                </>
              ),
              width: 100,
              render: cvm => {
                if (cvm.status === 'running') {
                  return <span style={{ color: 'green' }}>running</span>
                }
                if (cvm.status === 'stopped') {
                  return <span style={{ color: 'red' }}>Shut down</span>
                }
                return cvm.status
              }
            },
            {
              key: 'AvailabilityZone',
              header: 'Availability Zone'
            },
            {
              key: 'InstanceType',
              header: 'Instance Type'
            },
            {
              key: 'InstanceConfiguration',
              header: 'Instance Configuration',
              align: 'right',
              render: cvm => (
                <>
                  <a>Login</a>
                  <a style={{ margin: '0 12px' }}>renewal</a>
                  <Select options={options} value={favorite} placeholder="please select" />
                </>
              )
            }
          ]}
          addons={[pageable()]}
        />
      </Card>
    </>
  )
}

export default function Demo() {
  return (
    <section>
      <TableLayoutExample />
    </section>
  )
}
